<template>
    <div class="login-common">
      <div class="common-content">
        <h1 class="title">{{desc}}服务</h1>
        <div class="user">
          <label>用户：</label><input type="text" class="user-input" ref="user" value="">
        </div>
        <div class="password">
          <label>密码：</label><input type="password" class="pass-input" ref="pass" value=""/>
        </div>
        <div class="search">
          <button class="search-btn" @click="selectInfo">查询</button>
        </div>
      </div>
      <div class="back" @click="backHome">返回</div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'LoginCommon',
  props: {
    desc: String
  },
  methods: {
    backHome () {
        this.$router.go(-1)
    },
    selectInfo () {
      this.user = this.$refs.user.value
      this.pass = this.$refs.pass.value
      if (this.user === "" || this.pass === "") {
        alert("请输入账号和密码")
      } else {
        axios.get('../../static/card/name.json')
          .then(this.selectInfoSucc)
      }
    },
    selectInfoSucc (res) {
        res = res.data
        if (res.code === 200 && res.data){
          const data = res.data
          this.xm  =res.data.xm
          this.$router.push(
            {
              name: 'Card',
              params: {
                xm: this.xm
              }
            })
//                query:{xgh: this.$refs.user.value, XM: res.data.xm}})
//            console.log(data.xm)
        }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../assets/font/font.css"
  .login-common
    width 100%
    height 1024px
    background url("../../../assets/img/bg.jpg") no-repeat
    background-size 100% 100%
    font-family 'JLH'
    color #fff
    .common-content
      position relative
      top 120px
      margin 0 auto
      width 589px
      height 798px
      text-align center
      background rgba(9, 59, 85, 0.33)
      border-radius 10px
      box-shadow 0px 0px 14px #fff
      .title
        padding-top 100px
        font-family 'JLH'
        font-size 80px
        color #fff
      .user
        margin-top 100px
        font-size 40px
        .user-input
          box-sizing border-box
          width 273px
          height 40px
          border-radius 15px
          outline none
          /*margin-left 10px*/
          font-size 28px
          color #186d92
          padding-left 13px
          line-height 40px
          margin-top -13px
      .password
        font-size 40px
        margin 75px 0 118px 0px
        .pass-input
          box-sizing border-box
          width 273px
          height 40px
          border-radius 15px
          outline none
          /*margin-left 10px*/
          font-size 28px
          color #186d92
          padding-left 13px
          line-height 40px
          margin-top -13px
      .search
        font-size 40px
        height 70px
        width 388px
        margin 0 auto
        .search-btn
          width 100%
          height 100%
          border-radius 15px
          color rgb(4, 40, 57)
          font-family JLH
          -webkit-text-fill-color rgb(4, 40, 57)
          -webkit-text-stroke 2px rgb(4, 40, 57)
          outline: none
    .back
      position absolute
      top 5%
      left 5%
      width 115px
      height 55px
      line-height 55px
      text-align center
      font-size 40px
      border-radius 15px
      z-index 50
      background: linear-gradient(
        to right,
        rgba(0, 34, 52, 0.4),
        rgba(54, 191, 255, 1)
      )
      box-shadow: 0px 0px 8px #fff
</style>
